<script lang="ts" setup>
import { nextTick, ref, unref } from 'vue';

import { useVbenDrawer, useVbenModal } from '@vben/common-ui';

import { FloatButton, FloatButtonGroup, Spin } from 'ant-design-vue';

import { getThemesFiles } from '#/api/admin/theme';
import Icon from '#/components/Icons';
import { useAppConfig } from '@vben/hooks';
import FilesWidgetsConfigDrawerView from './FilesWidgetsConfigDrawer.vue';

const state: {
  files: object;
  theme: string;
  url: string;
} = reactive({
  theme: '',
  url: '',
  files: [],
});
const showFloatButtonGroup = true;
const loading = ref(true);
const frameSrc = ref<string>('');
const frameRef = ref<HTMLIFrameElement | null>(null);
function hideLoading() {
  loading.value = false;
}

function init() {
  nextTick(() => {
    frameSrc.value = `${state.url}/?_design_theme=${state.theme}`;
    const iframe = unref(frameRef);
    if (!iframe) return;
    const _frame = iframe as any;
    if (_frame.attachEvent) {
      _frame.attachEvent('onload', () => {
        hideLoading();
      });
    } else {
      iframe.addEventListener('load', () => {
        hideLoading();
      });
    }
  });
}
const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>();

      state.theme = modalData.theme;
      state.url = modalData.url;
      const {
        data: { list },
      } = await getThemesFiles(state.theme);

      state.files = list;
      init();
    }
  },
});

const [FilesWidgetsConfigDrawer, FilesWidgetsConfigDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: FilesWidgetsConfigDrawerView,
  onOpenChange: (open) => {
      if (!open) {
        
        const data = FilesWidgetsConfigDrawerApi.getData()

        data.files.forEach(element => {
          if(element.file == data.file){
            const s = useAppConfig(import.meta.env, import.meta.env.PROD)
            frameSrc.value=s.baseURL+(element.url??'')+'?design_theme=default';
          
            refresh();
          }
        });
      }
    }
 
});

const handleFiles = async () => {
  const old =FilesWidgetsConfigDrawerApi.getData();
  FilesWidgetsConfigDrawerApi.setData({
    theme: state.theme,
    files: state.files,
    file:old.file??"",
    
  });
  FilesWidgetsConfigDrawerApi.open();
};

const refresh = () => {
  if (frameRef.value) {
    const url = frameSrc.value;
    frameRef.value.src = '';
    frameRef.value.src = url;
  }
};

const handleSize = (size: 'mobile' | 'pad' | 'pc') => {
  if (frameRef.value) {
    frameRef.value.className = `simulator-${size}`;
  }
};

// iframe 加载完成后启动定时器
const onIframeLoad = () => {
  // if (frameRef.value) {
  //   timer = setInterval(fetchData, 2000); // 每2秒请求一次接口
  //   console.warn(frameRef.value.src);
  // }
};
</script>
<template>
  <Modal :footer="false" class="w-3/5">
    <FilesWidgetsConfigDrawer style="z-index: 9999" />
    <Spin :spinning="loading">
      <div class="frame">
        <iframe
          ref="frameRef"
          :src="frameSrc"
          class="simulator-pc"
          @load="onIframeLoad"
        ></iframe>
      </div>
    </Spin>
    <FloatButtonGroup
      v-if="showFloatButtonGroup"
      :style="{ left: '50px', top: '80px' }"
      shape="circle"
    >
      <FloatButton @click="refresh">
        <template #icon>
          <Icon icon="ri:refresh-line" />
        </template>
      </FloatButton>
      <FloatButton @click="handleFiles()">
        <template #icon>
          <Icon icon="ri:brush-line" />
        </template>
      </FloatButton>
      <FloatButton @click="handleSize('pc')">
        <template #icon>
          <Icon icon="ri:computer-line" />
        </template>
      </FloatButton>
      <FloatButton @click="handleSize('pad')">
        <template #icon>
          <Icon icon="ri:tablet-line" />
        </template>
      </FloatButton>
      <FloatButton @click="handleSize('mobile')">
        <template #icon>
          <Icon icon="ri:smartphone-line" />
        </template>
      </FloatButton>
    </FloatButtonGroup>
  </Modal>
</template>

<style lang="scss" scoped>
.frame {
  z-index: 998;
  height: calc(70vh - 88px);

  .simulator-pc {
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 88px);
    overflow: hidden;
    border: 0;
  }

  .simulator-pad {
    width: 1180px;
    height: 820px;
    margin: auto;
    border: 1px solid #aaa;
    transform: scale(0.7);
  }

  .simulator-mobile {
    width: 375px;
    height: 667px;
    margin: auto;
    border: 1px solid #aaa;
    transform: scale(0.9);
  }
}

.main-content {
  margin: 2px 0 0 !important;
}
</style>
